<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
	<meta charset="UTF-8">
	<title>Reports using TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.5.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="static/jquery-easyui-1.5.1/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="static/css/icommon.css" />
	<script type="text/javascript" src="static/js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="static/jquery-easyui-1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="static/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="static/js/HhUtil.js?t=20170109"></script>

	<script type="text/javascript">
    var editingId;
    $(function () {
        var editingId;
        var tt;
        tt = $('#tt').treegrid({
            url:'/getvotelist',
            method: 'get',
            idField:'id',
            treeField:'name',
            columns:[[
                {title:'名称',editor:'text',field:'name',width:'50%'},
                {field:'type',editor:'combobox',title:'单/多选',width:'30%',align:'right'},
                {field:'status',editor:'text',title:'是否可用',width:'20%'}
            ]]
        });
    });

        function formatProgress(value){
        if (value){
            var s = '<div style="width:100%;border:1px solid #ccc">' +
                    '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
                    '</div>';
            return s;
        } else {
            return '';
        }
    }

    function edit(){
        var row = $('#tt').treegrid('getSelected');
        editingId = row.id;
        if (row){
            $('#tt').treegrid('beginEdit', editingId);
        }
    }
    function save(){
        if (editingId != undefined){
            $('#tt').treegrid('endEdit', editingId);
            editingId = undefined;
            var persons = 0;
            var rows = $('#tt').treegrid('getChildren');
            for(var i=0; i<rows.length; i++){
                var p = parseInt(rows[i].persons);
                if (!isNaN(p)){
                    persons += p;
                }
            }
            var frow = $('#tt').treegrid('getFooterRows')[0];
            frow.persons = persons;
            $('#tt').treegrid('reloadFooter');
        }
    }
    function cancel(){
        if (editingId != undefined){
            $('#tt').treegrid('cancelEdit', editingId);
            editingId = undefined;
        }
    }
    </script>
</head>
<body style="width:100%;height:100%;margin: 0px">
<div style="margin:20px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a>
</div>
<table id="tt" style="width:100%;height:100%"></table>
</body>
</html>